<!--用户管理页-->
<template>
  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">用户管理</span>
    <el-button type="primary" @click="dialogVisible = true"
               style="float: right;margin-top:10px;">新建用户</el-button>
  </div>
  <!-- 新建用户弹窗 -->
  <el-dialog
      title="新建用户"
      style="width: 1000px;padding:40px;"
      v-model="dialogVisible"
  >
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" v-model="saveUserForm.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="职级">
            <el-select placeholder="请选择" v-model="saveUserForm.level">
              <!--              <el-option label="职员" value="10"></el-option>-->
              <!--              <el-option label="经理" value="20"></el-option>-->
              <!--              <el-option label="总监" value="30"></el-option>-->
              <!--              <el-option label="总裁" value="40"></el-option>-->
              <el-option v-for="item in levelOptions"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="直属领导">
            <el-select placeholder="请选择" v-model="saveUserForm.parentId">
              <el-option v-for="item in leaderOptions"
                         :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.gender">
              <el-radio border label="男" value="1" style="margin: 0;"></el-radio>
              <el-radio border label="女" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户状态">
            <el-radio-group v-model="saveUserForm.status">
              <el-radio border label="启用" value="1" style="margin: 0;"></el-radio>
              <el-radio border label="禁用" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button>取消</el-button>
      <el-button type="primary" @click="saveUser">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
//定义变量控制弹窗是否出现
const dialogVisible = ref(false);

//定义数组来维护员工职级的选项
const levelOptions = ref([
  {label:'员工',value:'10'},
  {label:'经理',value:'20'},
  {label:'总监',value:'30'},
  {label:'总裁',value:'40'}
]);
//定义数组来维护员工直属领导的数据
const leaderOptions = ref([
  {username:'AA',id:'101'},
  {username:'BB',id:'102'}
]);

//定义对象用来保存表单中的员工数据
const saveUserForm = ref({
  username:'',
  phone:'',
  email:'',
  age:'',
  level:'',
  parentId:'',
  gender:'',
  status:''
});
//定义保存用户的方法
const saveUser = () => {
  //console.log(saveUserForm.value);
  axios.post(BASE_URL+'/v1/user/save',saveUserForm.value)
      .then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success('保存成功!');
          dialogVisible.value = false;//关闭弹窗
          saveUserForm.value = {};//清空表单
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}
</script>

<style scoped>

</style>
4.1.1.4